<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
    <title>登录</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="8" :offset="8">
                    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                        <el-tab-pane label="扫码登录" name="qrcode">扫码登录</el-tab-pane>
                        <el-tab-pane label="账号登录" name="account">
                            <el-form :model="accountForm" status-icon :rules="rules" ref="accountForm">
                                <el-form-item prop="username">
                                    <el-input type="text" v-model="accountForm.username" placeholder="账号/邮箱"
                                              autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input type="password" v-model="accountForm.password" placeholder="密码"
                                              autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="validCode">
                                    <el-row style="display: flex">
                                        <el-input type="validCode" v-model="accountForm.validCode"
                                                  placeholder="图形验证码"
                                                  autocomplete="off" style="width:150px;"></el-input>
                                        <el-image style="width: 100px; height: 35px"
                                                  :src="vCode"
                                                  @click="refreshValidateCode"></el-image>
                                    </el-row>
                                </el-form-item>
                                <el-form-item style="text-align: center;">
                                    <el-button type="primary" :loading="loading.account" @click="accountSubmit">登录
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="手机登录" name="phone">
                            <el-form :model="phoneForm" status-icon :rules="rules" ref="phoneForm">
                                <el-form-item prop="phone">
                                    <el-input type="text" v-model="phoneForm.phone" placeholder="手机号"
                                              autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input type="code" v-model="phoneForm.code" placeholder="验证码"
                                              autocomplete="off" style="width:200px;"></el-input>
                                    <el-button>发送验证码</el-button>
                                </el-form-item>
                                <el-form-item prop="validCode">
                                    <el-row style="display: flex">
                                        <el-input type="validCode" v-model="phoneForm.validCode"
                                                  placeholder="图形验证码"
                                                  autocomplete="off" style="width:150px;"></el-input>
                                        <el-image style="width: 100px; height: 35px"
                                                  :src="vCode"
                                                  @click="refreshValidateCode"></el-image>
                                    </el-row>
                                </el-form-item>
                                <el-form-item style="text-align: center;">
                                    <el-button type="primary" :loading="loading.phone" @click="phoneSubmit">登录
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
<!-- import axios -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script>
    const VV = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'qrcode',
                uuid: this.randomString(),
                vCode: '',
                loading: {account: false, phone: false},
                accountForm: {
                    username: '',
                    password: '',
                    validCode: ''
                },
                phoneForm: {
                    phone: '',
                    code: '',
                    validCode: ''
                },
                rules: {
                    username: [
                        {required: true, message: '输入登录账号/邮箱', trigger: 'blur'},
                        {min: 5, max: 50, message: '长度在 5 ~ 50 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '输入登录密码', trigger: 'blur'},
                        {min: 5, max: 32, message: '长度在 5 ~ 32 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '输入登录手机号', trigger: 'blur'},
                        {min: 11, max: 11, message: '只支持 11 位手机号', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '输入手机验证码', trigger: 'blur'},
                        {min: 4, max: 4, message: '4 位数', trigger: 'blur'}
                    ],
                    validCode: [
                        {required: true, message: '输入图形验证码', trigger: 'blur'},
                        {min: 4, max: 4, message: '4 位', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {
        },
        created() {
            // 初始化的时候，加载验证码
            this.vCode = `http://127.0.0.1:9900/api-uaa/validata/code/` + this.uuid
        },
        methods: {
            handleClick(tab) {
                const idx = parseInt(tab.index)
                if (idx === 1) {
                    this.resetForm('phoneForm')
                } else if (idx === 2) {
                    this.resetForm('accountForm')
                }
            },
            accountSubmit() {
                const _this = this
                _this.$refs.accountForm.validate((valid) => {
                    if (valid) {
                        // 提交请求
                        _this.accountForm.deviceId = this.uuid
                        _this.loading.account = true
                        // vue的登录有个问题，登录成功后，oauth会默认redirect，导致出现 CORS 问题。
                        $.post('/user/login', _this.accountForm, function (response) {
                            console.log(response)
                            if (response.code === 1) {
                                _this.$message.error(response.msg);
                            }
                            _this.loading.account = false
                        }, 'json');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            phoneSubmit() {
                this.$refs.phoneForm.validate((valid) => {
                    if (valid) {
                        // 提交登录请求

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            randomString(e) {
                //形参e,需要产生随机字符串的长度
                //如果没有传参，默认生成32位长度随机字符串
                e = e || 32;
                //模拟随机字符串库
                let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
                    a = t.length,//字符串t的长度，随机数生成最大值
                    n = "";
                for (let i = 0; i < e; i++) {
                    //随机生成长度为e的随机字符串拼接
                    n += t.charAt(Math.floor(Math.random() * a));
                }
                //返回随机组合字符串
                return n
            },
            refreshValidateCode() {
                // 刷新验证码，防止点击过快，页面一次只允许刷新5次，60s过期
                this.vCode = this.vCode + '?t=' + new Date().getTime();
            }
        }
    })
</script>
</html>